<template>
<!--  回转分区单组计算最后一个图 回转特有-->
  <div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
    <!--    <div>{{this.caculateResult.NOx_generation}}</div>-->
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

export default {
  props: {
    caculateResult: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  setup(props) {
    const chart = ref(null);

    onMounted(() => {
      const chartInstance = echarts.init(chart.value);
      const rawData = props.caculateResult.UrTo_standardTime.data;
      console.log('rawData',rawData)
      console.log("props.caculateResult.UrTo_standardTime",props.caculateResult.UrTo_standardTime)
      const xData = Object.keys(rawData).map(
        (key) => parseFloat(key.match(/\d+/)[0]) - 273,
      ); // 将横坐标值转换为摄氏度

      const yData = Object.values(rawData).map((item) => item.result);

      const option = {
        tooltip: {
          trigger: "axis",
          // formatter: "铀浓度：{c0} (g·L^-1)",
          formatter: function(params) {
            var tooltipText = '温度：' + params[0].name + '℃' + '<br>'; // 初始化提示框文本
            // 遍历数据项，添加系列名称、颜色和数据项名称
            for (var i = 0; i < params.length; i++) {
              var seriesName = params[i].seriesName; // 获取系列名称
              var color = params[i].color; // 获取数据项颜色
              var dataName = params[i].value; // 获取数据项名称
              tooltipText += '<span style="color:' + color + '">&#9679;</span> ' + seriesName + ' : ' + dataName + '<br>';
            }
            return tooltipText;
          },
          // formatter: function(params) {
          //   var result = '';
          //   for (var i = 0; i < params.length; i++) {
          //     result += '温度: ' + params[i].name +' ℃' + '<br />';
          //     result += '溶解时间 : ' + params[i].value + ' min' + '<br />';
          //   }
          //   return result;
          // },
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: '#fff', // 悬浮框背景色
          borderColor: '#409EFF', // 悬浮框边框颜色
          borderWidth: 1, // 悬浮框边框宽度
          textStyle: { // 悬浮框文字样式
            color: '#000',
            fontSize: 12
          }

        },
        xAxis: {
          type: "category",
          data: xData,
          name: "系统温度/℃",
          axisLabel: {
            formatter: function(value) {
              return parseFloat(value).toFixed(2); // 保留两位小数
            }
          }
        },
        yAxis: {
          type: "value",
          name: "溶解时间/min",
        },
        series: [
          {
            type: "line",
            data: yData,
            label: {
              formatter: "{c0}",
            },
            symbol: "none", // 隐藏数据点
          },
        ],
      };

      chartInstance.setOption(option);
    });

    return {
      chart,
    };
  },
};
</script>

<style>
/* 添加你的样式 */
</style>
